<template>
    <Form ref="form" :model="form" :rules="ruleValidate" :label-width="100">
        <FormItem label="选择值班项" prop="foreignkeyid">
            <Select v-model="form.foreignkeyid" disabled placeholder="请选择值班项">
                <Option v-for="item in edu" :value="item.watchlist_id" :key="item.watchlist_id">{{ item.watchlist_name }}</Option>
            </Select>
        </FormItem>
        <FormItem label="数据来源" prop="apijudge">
            <RadioGroup v-model="form.apijudge" @on-change="apiState">
                <Radio label="1">系统</Radio>
                <Radio label="2">自定义</Radio>
            </RadioGroup>
        </FormItem>
        <FormItem label="选择API" prop="apiid" v-if="selApi">
            <Select v-model="form.apiid" placeholder="请选择API">
                <Option v-for="item in api" :value="item.dictionary_id" :key="item.dictionary_id">{{ item.dictionary_name }}</Option>
            </Select>
        </FormItem>
        <FormItem label="排序" prop="formorder">
            <Input v-model="form.formorder" placeholder="输入排序(数字越大越靠前)"></Input>
        </FormItem>
        <FormItem label="选择表单类型" prop="type">
            <Select v-model="form.type" placeholder="请选择表单类型">
                <Option v-for="item in formType" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select>
        </FormItem>
        <FormItem label="表单显示名称" prop="show_name.zh">
            <Input v-model="form.show_name.zh" placeholder="表单显示名称"></Input>
        </FormItem>
        <FormItem label="表单名称说明" prop="show_explain.zh">
            <Input v-model="form.show_explain.zh" placeholder="表单名称说明"></Input>            
        </FormItem>
        <FormItem>
            <Button type="primary" @click="handleSubmit('form')">{{condition !=null ?'修改':'添加'}}</Button>
        </FormItem>
    </Form>
</template>

<script>
export default {
    props: ['items','condition'],
    data () {
        return {
            selApi:true,
            form:{
                show_name: {
                    zh:null,
                    en:null,
                    mn:null,
                },
                show_explain: {
                    zh:null,
                    en:null,
                    mn:null,
                },
                apiid:null,
                formorder:'0',
                apijudge:'1',
                type:null,
                foreignkeyid: this.items,
            },
            formType:[
                { value:1, label:'普通输入框' },
                { value:2, label:'下拉列表' },
                { value:3, label:'单选' },
                { value:4, label:'多选' },
                { value:5, label:'富文本' },
                { value:6, label:'时间选择' },
            ],
            addUrl:'api/watchlist/v1/watchlistfrom/add',
            editUrl:'api/watchlist/v1/watchlistfrom/edit/' + this.condition,
            selUrl:'api/watchlist/v1/watchlistfrom/find/' + this.condition,

            apiUrl:'api/dictionary/v1/get/dictionary/list?dictionary_code=moralbaseapi',
            api:Array,
            eduUrl:'api/watchlist/v1/get/watchlistclass/list',
            edu:Array,
            ruleValidate: {
                'show_name.zh':[
                    { required: true, message: '请输入表单显示名称', trigger: 'blur' }
                ],
                'show_explain.zh':[
                    { required: true, message: '请输入表单名称说明', trigger: 'blur' }
                ],
                formorder:[
                    { required: true, message: '请输入排序', trigger: 'blur' }
                ],
                type: [
                    { required: true, type: 'number', message: '请选择表单状态', trigger: 'change' }
                ],
                foreignkeyid: [
                    { required: true, type: 'number', message: '请选择值班项', trigger: 'change' }
                ],
                apijudge: [
                    { required: true, message: '请选择数据来源', trigger: 'change' }
                ],
            },
        }
    },
    methods: {

        // ==================================================
        // 表单验证
        // ==================================================
        handleSubmit (name) {
            this.$refs[name].validate((valid) => {
                if (valid) {
                    if(this.form.apijudge == '2'){
                        delete this.form.apiid
                    }
                    this.submit()
                } else {
                    this.$Message.error('请检查填写内容');
                }
            })
        },

        // ==================================================
        // 执行添加
        // ==================================================
        submit () {
            if(this.condition !=null){
                this.$http.put(this.editUrl,this.form).then(val=>{
                    this.promptBox = false;
                    this.$emit('requery',true)
                }).catch(err=>{
                    if(err.code && err.code==422) {
                        this.$Message.error(err.message);
                    }
                })
            }else{
                this.$http.post(this.url,this.form).then(val=>{
                    this.promptBox = false;
                    this.$emit('requery',true)
                }).catch(err=>{
                    if(err.code && err.code==422) {
                        this.$Message.error(err.message);
                    }
                })
            }
            
        },

        // ==================================================
        // 选择类型
        // ==================================================
        apiState(val){
            if(val == '1'){
                this.selApi = true
            }
            if(val == '2'){
                this.selApi = false
            }
        },

        // ==================================================
        // 查询值班项数据
        // ==================================================
        eduData(){
            this.$http.get(this.eduUrl).then(val=>{
                this.edu = val.data
            }).catch(err=>{
                if(err.code && err.code==422) {
                    this.$Message.error(err.message);
                }
            })
        },

        // ==================================================
        // 查询api数据
        // ==================================================
        apiData(){
            this.$http.get(this.apiUrl).then(val=>{
                this.api = JSON.parse(JSON.stringify(val.data))
            }).catch(err=>{
                if(err.code && err.code==422) {
                    this.$Message.error(err.message);
                }
            })
        },
        selData(){
            this.$http.get(this.selUrl).then(val=>{
                this.singleData = JSON.parse(JSON.stringify(val.data))
                this.form.show_name = this.singleData.children.show_name
                this.form.show_explain = this.singleData.children.show_explain
                this.form.formorder = this.singleData.formorder
                this.form.type = parseInt(this.singleData.type)
                this.form.apijudge = (this.singleData.apijudge)
                this.form.foreignkeyid = parseInt(this.singleData.foreignkeyid)
                if(this.singleData.apijudge != '1'){
                    this.selApi = false
                }else{
                    this.form.apiid = parseInt(this.singleData.apiid)
                }
            }).catch(err=>{
                if(err.code && err.code==422) {
                    this.$Message.error(err.message);
                }
            })
        },
    },
    mounted(){
        this.apiData()
        this.eduData()
        if(this.condition != null){
            this.selData()
        }
    },
}
</script>